page{height:100%;background-color:#F7F7F7;}
.container {
  position: relative;
  height:100%;
  width: 100%;
  .containerIn{
    margin-top:5% ;
    height: 100%;
    width: 100%;
    overflow: auto;
    .noOrder{
      position:absolute;
      width:calc(unit(260,rpx) * 750 / 390);
      left:calc((100% - unit(260,rpx) * 750 / 390)/2);
      top:10%;
      height: 35.55%;
      z-index: 100;
      image{
        position: absolute;
        top:0;
        left:calc((100% - 30.8vh )/2);
        height:30.8vh;
        width:30.8vh;
      }
      text{
        position: absolute;
        bottom:0;
        font-weight: bolder;
        font-size:calc(unit(28,rpx) * 750 / 390);
        width:calc(unit(165,rpx) * 750 / 390);
        white-space: nowrap;
        left: calc((100% - unit(165,rpx) * 750 / 390)/2);;
      }
    }
    .noCouple{
      position:absolute;
      width:calc(unit(260,rpx) * 750 / 390);
      left:calc((100% - unit(260,rpx) * 750 / 390)/2);
      top:10%;
      height: 38.5%;
      z-index: 100;
      image{
        position: absolute;
        top:0;
        left:calc((100% - 30.8vh )/2);
        height:30.8vh;
        width:30.8vh;
      }
      view{
        position: absolute;
        bottom:0;
        text-align: center;
        text{
          font-weight: bolder;
          font-size:calc(unit(28,rpx) * 750 / 390);
          white-space: nowrap;
        }
      }
    }
    .order{
      height:26.07%;
      width:calc(unit(358,rpx) * 750 / 390);
      background-color: white;
      margin-left:auto;
      margin-right:auto;
      margin-bottom:calc(unit(16,rpx) * 750 / 390); ;
      position: relative;
      border-radius: calc(unit(16,rpx) * 750 / 390);

      .state{
        position: absolute;
        right:calc(unit(16,rpx) * 750 / 390);
        top:7.3%;
        height:11%;
        font-size:calc(unit(18,rpx) * 750 / 390);
        color: #115BDE;
        image{
          height:calc(unit(24,rpx) * 750 / 390);
          width:calc(unit(24,rpx) * 750 / 390);
          transform: scale(1.3)translateY(15%);
        }
      }
      .message{
        height:45.5%;
        width:calc(unit(326,rpx) * 750 / 390);
        //background-color: #88ADEF;
        position: absolute;
        top:21.8%;
        left:calc((100% - unit(326,rpx) * 750 / 390)/2);
        .img{
          background-color: #D9D9D9;
          height:11.85vh;
          width:11.85vh;
          border-radius: calc(unit(8,rpx) * 750 / 390);
          .type0{
            position:relative;
            z-index:90;
            width: 100%;
            height:100%;
            .role0{
              width: 30%;
              height:30%;
              position:absolute;
              top:40%;
              left:32%;
              z-index: 100;
            }
          }
          .type1{
            position:relative;
            z-index:90;
            width: 100%;
            height:100%;
            .role1{
              width: 30%;
              height:30%;
              position:absolute;
              top:38%;
              left:35%;
              z-index: 100;
            }
          }
          .type2{
            position:relative;
            z-index:90;
            width: 100%;
            height:100%;
            .role2{
              width: 60%;
              height:60%;
              position:absolute;
              top:20%;
              left:20%;
              z-index: 100;
            }
          }
        }
        .describe{
          font-size: calc(unit(12,rpx) * 750 / 390);;
          width:calc(unit(218,rpx) * 750 / 390);
          height: 100%;
          position:absolute;
          right: 0;
          top:0;
          color:#979797;
          //background-color:white;
          margin-bottom: calc(unit(5,rpx) * 750 / 390);;;
          .price{
            color: #000;
            position:absolute;
            right:0;
            bottom:0;
            font-size:calc(unit(21,rpx) * 750 / 390);
          }
        }
      }
      .btn{
        position: absolute;
        bottom:7.2%;
        right:calc(unit(16,rpx) * 750 / 390); ;
        height:18.2%;
        width:calc(unit(114,rpx) * 750 / 390);
        border-radius: calc(unit(50,rpx) * 750 / 390);
        background-color: white;
        text-align: center;
        font-size:calc(unit(16,rpx) * 750 / 390);
        //box-sizing: content-box;
        line-height:calc(unit(40,rpx) * 750 / 390);
        border-top: calc(unit(1, rpx) * 750 / 390) solid black;
        border-left: calc(unit(1, rpx) * 750 / 390) solid black;
        border-right: calc(unit(4, rpx) * 750 / 390) solid black;
        border-bottom: calc(unit(4, rpx) * 750 / 390) solid black;
      }
    }
    .coupons{
      transition: all 1s ease;
      height:calc(unit(110,rpx) * 750 / 390);
      width:calc(unit(330,rpx) * 750 / 390);
      background-color: white;
      margin-left:auto;
      margin-right:auto;
      margin-bottom:calc(unit(16,rpx) * 750 / 390);
      border-radius: calc(unit(16,rpx) * 750 / 390); ;
      position: relative;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      .ring{
        width:calc(unit(32,rpx) * 750 / 390);
        height:calc(unit(32,rpx) * 750 / 390);
        background-color: #F7F7F7;
        position: absolute;
        border-radius: 50%;
        top:calc((unit(110 - 32,rpx) * 750 / 390)/2);
      }
      .l{
         left:calc(unit(-16,rpx) * 750 / 390);
       }
      .r{
        right:calc(unit(-16,rpx) * 750 / 390);
      }

      .left{
        font-size: calc(unit(28,rpx) * 750 / 390);
        position: absolute;
        left:calc(unit(32,rpx) * 750 / 390);
        height:  calc(unit(36,rpx) * 750 / 390);;
        top:calc((unit(110 - 36,rpx) * 750 / 390)/2);
        color:#115BDE;
        font-weight: bolder;
      }
      .line{
        position: absolute;
        left:calc(unit(115,rpx) * 750 / 390);
        height:calc(unit(110,rpx) * 750 / 390);
        width:calc(unit(2,rpx) * 750 / 390);
        background-image: linear-gradient(#979797 50%, rgba(255,255,255,0) 0%);
        background-size: calc(unit(10,rpx) * 750 / 390) calc(unit(10,rpx) * 750 / 390);
        background-repeat: repeat-y;
        transform: translateY( calc(unit(-7,rpx) * 750 / 390));
      }
      .right{
        height: calc(unit(69,rpx) * 750 / 390);
        width:calc(unit(150,rpx) * 750 / 390);
        //background-color: #ffce81;
        position: absolute;
        left:calc(unit(140,rpx) * 750 / 390);
        top:calc(unit(20,rpx) * 750 / 390);
        font-size: calc(unit(18,rpx) * 750 / 390);
        .ddl{
          font-size: calc(unit(12,rpx) * 750 / 390);
          color: #979797
        }
        .bottomBlock{
          //background-color: red;
          height:28.99% ;
          width: 100%;
          font-size: calc(unit(12,rpx) * 750 / 390);
          color: #979797;
          position: absolute;
          bottom:0;
          display: flex;
          flex-direction: row;
          .rule{
            //transform: translateY(-25%);
            image{
              height:100%;
              width: calc(unit(20,rpx) * 750 / 390);
              transform: translateY(25%);
            }
          }
          .btn{
            transform: translateY(25%);
            height: 100%;
            font-size: calc(unit(14,rpx) * 750 / 390);
            line-height:calc(unit(20,rpx) * 750 / 390);
            width:calc(unit(55,rpx) * 750 / 390);
            text-align: center;
            position: absolute;
            color: white;
            right: calc(unit(-10,rpx) * 750 / 390);;
            bottom: 0;
            background-color: #115BDE;
            border-radius: calc(unit(50, rpx) * 750 / 390);
            border-top: calc(unit(1, rpx) * 750 / 390) solid black;
            border-left: calc(unit(1, rpx) * 750 / 390) solid black;
            border-right: calc(unit(2, rpx) * 750 / 390) solid black;
            border-bottom: calc(unit(2, rpx) * 750 / 390) solid black;
          }
        }
        .ruleMes{
          position: absolute;
          //background-color: lightcoral;
          top:calc(unit(98,rpx) * 750 / 390);
          font-size: calc(unit(12,rpx) * 750 / 390);
          color: #979797;
        }
      }
    }
    .active{
      transition: all 1s ease;
      height:calc(unit(340,rpx) * 750 / 390);
    }
  }
}